<!-- 计量申请 -->
<template>
  <div class="page-list">
      <div class="left">
          <TitleTips title="养护工程"></TitleTips>            
          <div v-if="projectList.length > 0" v-loading="projectLoading" class="list">
              <div v-for="(item,index) in projectList" :key="`project-${index}`" :class="['list-item', item.id === project.id? 'active':'']" @click="handleProjectClick(item)">
                <IconSvg icon-class="catalogue" class="catalogue-icon icon"></IconSvg>
                <TextTooltip :two-line="true"  :content="item.name" :ref-name="`${item.id}-${item.name}`" :class-name="`project-item`"></TextTooltip>
              </div>
          </div>
          <div v-else class="no-data">
              <IconSvg icon-class="no-data2" class="icon"></IconSvg>
              <span>暂无数据</span>
          </div>
      </div>
      <BasePage style="flex: 1;">
          <StatePannel slot="status" :status.sync="status"></StatePannel>
          <el-form slot="form" :inline="true" size="medium">
              <el-form-item label="计量申请ID">
                  <el-input v-model="query.id" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="申请时间">
                  <el-date-picker
                      v-model="query.time"
                      style="width: 300px;"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                  >
                  </el-date-picker>
              </el-form-item>
              <el-form-item>
                  <BaseButton v-permission="{ btnCode: 'dlyh_c89_d431_2' }" @click="handleFilter">查询</BaseButton>
                  <BaseButton v-permission="{ btnCode: 'dlyh_c89_d431_2' }" type="second" @click="resetConditions()">重置</BaseButton>
              </el-form-item>
          </el-form>
          <BaseButton slot="button" v-permission="{ btnCode: 'dlyh_c89_d432_2' }" :disabled="project.name === '全部'" @click="handleAdd"> 发起计量申请 </BaseButton>
          <BaseTable slot="table" ref="table" v-loading="listLoading" :data="list" :columns="columns" highlight-current-row height="calc(100% - 73px)" @sort-change="handleSortChange">
              <template #id="{ scope: {row } }">
                  <BaseButton type="text" @click="handleDetail(row.id)">{{ row.id }} </BaseButton>
              </template>
              <template #cycle="{ scope: {row } }">
                  {{ row.cycleStartDate }}-{{ row.cycleEndDate }}
              </template>
              <template #type="{ scope: {row } }">
                  {{ row.type | value2Name(types) }}
              </template>
              <template #status="{ scope: {row } }">
                  <div style="display: flex; align-items: center;">
                      <StateTag :id="row.status"></StateTag>
                      <span v-if="row.status === 1 " style="font-size: 14px;">（待{{ row.currentApprover.approverLevel }}级审批）</span>
                  </div>
              </template>
              <template #action="{ scope: { row } }">
                  <BaseButton v-permission="{ btnCode: 'dlyh_c89_d433_2' }" type="text" @click="handleDetail(row.id)">查看 </BaseButton>
                  <BaseButton v-show="(row.status === 0 || row.status === 3 || row.status === 4) && isSubmitUser(row)" v-permission="{ btnCode: 'dlyh_c89_d434_2' }" type="text" @click="handleEdit(row.id)"> 编辑 </BaseButton>
              </template>
          </BaseTable>
          <Pagination
              slot="pagination"
              :current-page.sync="page.pageNo"
              :page-size.sync="page.pageSize"
              :total="page.total"
              @size-change="getList"
              @current-change="getList"
          />
      </BasePage>
  </div>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { ProjectLedgerModel } from '@/models'
import StatePannel from './components/StatePannel.vue'
import StateTag from './components/StateTag.vue'
import { value2Name } from '@/filters'

export default {
    name: 'ApplyList',
    components: {
        BasePage,
        StatePannel,
        StateTag,
    },
    filters: {
        value2Name
    },
    data() {
        return {
            model: new ProjectLedgerModel(),
            defaultProps: {
                children: 'maintScopeList',
                label: 'projectName'
            },
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            query: {
                statusList: [], // 审批状态 
                time: [],
                startApplicationTime: '', // 开始申请时间
                endApplicationTime: '', // 结束申请时间
                id: '',
                projectId: '', // 合同ID
            },
            columns: [
                {
                    slot: 'id',
                    attrs: {
                        label: '计量申请ID',
                        prop: 'id',
                        'min-width': 80
                    }
                },
                {
                    attrs: {
                        label: '申请时间',
                        prop: 'applicationTime',
                        'show-overflow-tooltip': true,
                        sortable: 'custom',
                        'min-width': 100
                    }
                },
                {
                    attrs: {
                        label: '申请人',
                        prop: 'applicantName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '计量期数',
                        prop: 'periodNumber',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'cycle',
                    attrs: {
                        label: '计量周期',
                        prop: 'cycle',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '项目名称',
                        prop: 'projectName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '所属公路',
                        prop: 'highwayName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '施工单位',
                        prop: 'constructionUnitName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        label: '审批状态',
                        'show-overflow-tooltip': true,
                        width: 200
                    }
                },
                {
                    attrs: {
                        label: '更新时间',
                        prop: 'updateTime',
                        sortable: 'custom',
                        'show-overflow-tooltip': true,
                        'min-width': 100
                    }
                },
                {
                    slot: 'action',
                    attrs: {
                        label: '操作',
                        width: '120',
                    }
                }
            ],
            list: [],
            projectLoading: false, // 工程列表loading
            // 工程list
            projectList: [
                {
                    name: '全部',
                    id: 0
                },
                {
                    name: '测试1',
                    id: 1
                },
                {
                    name: '测试2',
                    id: 2
                }
            ], 
            // 选择的工程信息
            project: {
                name: '全部',
                id: ''
            },
            status: ''// 状态
        }
    },
    computed: {
        types() {
            return this.$store.state.types.maintenanceApplyTypes || []
        },
        userInfo() {
            return this.$store.state.user.avatar || {}
        }
    },
    watch: {
        'query.time'(val) {
            if (val && val.length) {
                this.query.startApplicationTime = val[0]
                this.query.endApplicationTime = val[1]
            } else {
                this.query.startApplicationTime = ''
                this.query.endApplicationTime = ''
            }
        },
        'status'(val) {
            if (val || val === 0) {
                this.query.statusList = [val]
            } else {
                this.query.statusList = []
            }
           
            this.handleFilter()
        },
    },
    async created() {
        this.getTypes()
        await this.getProjectList()
        this.initList()
    },
    methods: {
        // 是否是当前提交的用户,  删除和撤回需限制
        isSubmitUser(item) {
            if (Number(this.userInfo.id) === Number(item.applicantId)) {
                return true
            } else {
                return false
            }
        },
        // 获取养护工程
        getProjectList() {
            this.projectLoading = true
            return this.model
                .allList()
                .then(res => {
                    const list = res || []
                    this.projectList = [{id: '', name: '全部'}].concat(list)
                })
                .finally(() => {
                    this.projectLoading = false
                })
        },
        // 选择养护工程
        handleProjectClick(data) {
            this.project = {...data}
            this.query.projectId = data.id
            this.getList()
        },
        initList() {
            const active = this.projectList[0] || {}
            this.project = active
            this.query.projectId = ''
            this.getList()
        },
        // store
        getTypes() {
            this.$store.dispatch('types/query', 'maintenanceApplyTypes')
        },
        // 排序
        handleSortChange({ column, prop, order }) {  
            // 更新时间updateTime
            if (prop === 'updateTime') {
                if (order === 'ascending') {  
                    this.query.sortFields = [
                        {
                            sortFieldName: 'update_time',
                            sortType: 'asc'
                        }
                    ]
                } else if (order === 'descending') {
                    this.query.sortFields = [
                        {
                            sortFieldName: 'update_time',
                            sortType: 'desc'
                        }
                    ]
                } else {
                    this.query.sortFields = []
                }
            }
            // 申请时间applicationTime
            if (prop === 'applicationTime') {
                if (order === 'ascending') {  
                    this.query.sortFields = [
                        {
                            sortFieldName: 'application_time',
                            sortType: 'asc'
                        }
                    ]
                } else if (order === 'descending') {
                    this.query.sortFields = [
                        {
                            sortFieldName: 'application_time',
                            sortType: 'desc'
                        }
                    ]
                } else {
                    this.query.sortFields = []
                }
            }
            this.getList()
        },
        // 新增
        handleAdd() {
            this.$router.push({
                path: './add',
                query: {
                    project: JSON.stringify({
                        ...this.project,
                    })
                }
            })
        },
        // 详情
        handleDetail(id) {
            this.$router.push({
                path: './detail',
                query: {
                    id: id,
                    pageType: 'detail'
                }
            })
        },
        // 编辑
        handleEdit(id) {
            this.$router.push({
                path: './edit',
                query: {
                    id: id,
                    pageType: 'edit'
                }
            })
        },
        // 列表数据
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        getList() {
            this.listLoading = true
            this.model
                .applicationList({...this.query, ...this.page})
                .then((res) => {
                    if (res) {
                        this.list = res.list
                        this.page.total = res.totalCount
                    } else {
                        this.list = []
                        this.page.total = 0
                    }
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        resetConditions() {
            this.query.startApplicationTime = ''
            this.query.endApplicationTime = ''
            this.query.id = ''
            this.query.time = []
            this.handleFilter()
        }
    }
}
</script>

<style lang="scss" scoped>
.page-list{
  display: flex;
  width: 100%;
  .left {
      width: 280px;
      height: 100%;
      margin-right: 16px;
      flex-shrink: 0;
      border: 1px solid #f0f4f7;
      box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
      padding: 24px 16px;
      .list {
          height: calc(100% - 38px);
          overflow-y: auto;
          .active{
                background: #f0f4f7;
                color: #000;
            }
          .list-item{
            cursor: pointer;
            font-size: 14px;
            padding: 8px 0px;
            display: flex;
            align-items: center;
            &:hover{
              background: #f0f4f7;
              color: #000;
            }
            .icon{
              font-size: 20px;
              margin-right: 6px;
            }
          }
         
      }
  }
}
.no-data {
  color: #9090A0;
  font-size: 14px;
  text-align: center;
  padding: 140px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon {
      font-size: 66px;
      padding-bottom: 12px;
      color: #c2c2c2;
  }
  .button {
      color: #0162FF;
      font-style: normal;
      cursor: pointer;
  }
}

</style>
<style lang="scss">
 .project-item{
    width: 220px;
}

</style>
